<template>
	<view class="viewimg" style="background: #42AE49;">
		<view>
			<view class="row-box" style="justify-content: space-between;padding: 40rpx 36rpx;">
				<view class="row-box">
					<image src="../../static/icon/run.png" class="icon"></image>
					<view class="title">训练部位：{{ this.getSymptomText(data.symptom) }}</view>
				</view>
				<view class="name">{{data.memberName}}</view>
			</view>
			<view class="content">
				<view class="sub-title">
					课程展示
					<view style="margin-top: 26rpx;position: relative;">
						<video style="width: 687rpx;
height: 386rpx;" id="myVideo"
							src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
							@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
					</view>
				</view>
				<view style="margin-top: 470rpx; position: relative;">
					<view class="row-box"
						style="padding-bottom:30rpx;justify-content:  space-between;border-bottom:  1rpx solid #E1E1E1;">
						<view class="sub-title">设备信息</view>
						<view class="link">已连接</view>
					</view>
					<view style="width: 20rpx; position: absolute;top: 300rpx;">弯曲角度</view>
					<echarts :option="optiontwo" style="height: 550rpx;"></echarts>
				</view>
			</view>
		</view>
		<view class="btn" @click="goTrainFeedback(data.id)">训练反馈</view>
	</view>
</template>

<script>
	import echarts from "@/components/echarts/echarts.vue"
	// import wxCharts from 'wx-chart'
	export default {
		data() {
			return {
				optiontwo: {},
				lessonId: 0,
				data: {},
				video: 0,
				data: 0,
			};
		},
		onLoad(option) {
			this.lessonId = option.id;
			this.getTrainDetail(option.id);
		},
		// components: {
		// 	echarts
		// },
		mounted() {
			// this.logstatrt();
			// this.logstatrtone();
			this.logstatrttwo();
		},
		methods: {
			goTrainFeedback(id) {
				uni.navigateTo({
					url: "/pages/my/training-feedback?id="+id
				});
			},
			getSymptomText(value) {
				switch (value) {
					case 1:
						return '全髋'
					case 2:
						return '全膝'
					case 3:
						return '全肩'
					case 4:
						return '全肘'
					case 5:
						return '掌指'
					case 6:
						return '髋部'
					default:
						return ''
				}
			},
			getTrainDetail(id) {
				let that = this;
				uni.request({
					url: "https://guokang365.mordo-care.com/api/recureTrain/searchListAll",
					method: 'POST',
					//仅为示例，并非真实接口地址。
					header: {
						'Cookie': "JSESSIONID=" + getApp().globalData.serverSession
					},
					data: {
						"conditions": [{
							"name": "recureLessonId",
							"operate": "eq",
							"value": id
						}],
					},
					success: (res) => {
						// todo 入参是or
						if (res.data.result != '100' || res.data.list == null) {
							// 获取会员统计数据失败，不确定是否要弹窗
							uni.showModal({
								content: '获取数据失败',
								showCancel: false,
								buttonText: '确定',
							})
						} else {
							// todo 展示列表
							that.data = res.data.list[0];
						}
					},
				});
			},
			logstatrttwo() {
				var m2R2Data = [{
						value: 90,
						// value1: 234,
						legendname: 'Ⅰ类',
						name: "Ⅰ类",
						itemStyle: {
							color: "#42AE49"
						}
					},
					{
						value: 270,
						// value1: 314,
						legendname: 'Ⅱ类',
						name: "Ⅱ类",
						itemStyle: {
							color: "#E5F4E6"
						}
					},
				];
				var m2R3Data = [{
						value: 0,
						// value1: 234,
						// legendname: 'Ⅰ类',
						// name: "Ⅰ类",
						itemStyle: {
							// color: "#DEFFE0",
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 1,
								y2: 0,
								colorStops: [{
										offset: 0,
										color: '#FFFFFF'
									},
									{
										offset: 1,
										color: '#DEFFE0'
									},
								],
							},
						}
					},
				];
				var m2R4Data = [{
						value: 0,
						// value1: 234,
						// legendname: 'Ⅰ类',
						// name: "Ⅰ类",
						itemStyle: {
							// color: "#DEFFE0",
							color: {
								type: 'linear',
								x: 1,
								y: 1,
								x2: 1,
								y2: 0,
								colorStops: [{
										offset: 1,
										color: '#FFFFFF'
									},
									{
										offset: 0,
										color: '#42AE49'
									},
								],
							},
						}
					},
				];

				this.optiontwo = {
					title: [{
						// 	text: '全网调控情况',
						// 	textStyle: {
						// 		fontSize: 16,
						// 		color: "black"
						// 	},
						// 	left: "35%"
						// },
						// {
						text: '90°',
						// subtext: 44.5 + '℃',
						textStyle: {
							fontSize: 50,
							color: "black",
							// font-family: DIN Alternate Bold
						},
						subtextStyle: {
							fontSize: 20,
							color: 'black'
						},
						textAlign: "center",
						x: '50%',
						y: '44%',
					}],
					// tooltip: {
					// 	trigger: 'item',
					// 	formatter: function(parms) {
					// 		var str = parms.seriesName + "</br>" +
					// 			parms.marker + "" + parms.data.legendname + "</br>" +
					// 			"当前温度：" + parms.data.value + "</br>" +
					// 			"目标温度：" + parms.data.value1 + "</br>" +
					// 			"占比：" + parms.percent + "%";
					// 		return str;
					// 	}
					// },
					// 				legend: {
					// 					type: "scroll",
					// 					orient: 'vertical',
					// 					left: '80%',
					// 					align: 'left',
					// 					top: 'middle',
					// 					textStyle: {
					// 						color: '#8C8C8C'
					// 					},
					// 				},
					series: [{
						name: '全网调控情况',
						type: 'pie',
						center: ['50%', '50%'],
						radius: ['0%', '78%'],
						clockwise: false, //饼图的扇区是否是顺时针排布
						avoidLabelOverlap: false,
						itemStyle: { //图形样式
							normal: {
								borderColor: '#DEFFE0',
								//#FFFFFF 0%, #DEFFE0 100%
								// borderWidth: 1,
							},
						},
						label: {
							normal: {
								show: false,
							}
						},
						data: m2R4Data
					}, {
						name: '全网调控情况',
						type: 'pie',
						center: ['50%', '50%'],
						radius: ['40%', '75%'],
						clockwise: false, //饼图的扇区是否是顺时针排布
						avoidLabelOverlap: false,
						itemStyle: { //图形样式
							normal: {
								borderColor: '#ffffff',
								borderWidth: 0,
							},
						},
						label: {
							normal: {
								show: false,
								position: 'outter',
								formatter: function(parms) {
									return parms.data.legendname
								}
							}
						},
						labelLine: {
							normal: {
								length: 15,
								length2: 13,
								smooth: true,
							}
						},
						data: m2R2Data
					}, {
						name: '全网调控情况',
						type: 'pie',
						center: ['50%', '50%'],
						radius: ['0%', '40%'],
						clockwise: false, //饼图的扇区是否是顺时针排布
						avoidLabelOverlap: false,
						itemStyle: { //图形样式
							normal: {
								borderColor: '#DEFFE0',
								//#FFFFFF 0%, #DEFFE0 100%
								// borderWidth: 1,
							},
						},
						data: m2R3Data
					}]
				};
			},
		}
	};
</script>

<style>
	.row-box {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.icon {
		width: 34rpx;
		height: 34rpx;
		margin-right: 14rpx;

	}

	.btn {
		position: fixed;
		bottom: 0rpx;
		text-align: center;
		width: 750rpx;
		height: 129rpx;
		background: #42AE49;
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 129rpx;
	}

	.title {
		height: 45rpx;
		font-size: 33rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 45rpx;
	}

	.name {
		height: 37rpx;
		font-size: 27rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 37rpx;
	}

	.content {
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 38rpx 38rpx 0rpx 0rpx;
		box-sizing: border-box;
		padding: 40rpx 36rpx;
	}

	.sub-title {
		height: 40rpx;
		font-size: 29rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #484848;
		line-height: 40rpx;
	}

	.link {
		font-size: 25rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #42AE49;
		line-height: 36rpx;
	}
</style>